import { Form, Input, Button, Select, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const PeriodDetailSearch = ({ type, handleSearch, handleReset }) => {
  const [form] = Form.useForm();

  // 点击查询按钮
  const onFinish = (val) => {
    handleSearch(val);
  };

  // 点击重置
  const onReset = () => {
    form.resetFields();
    handleReset();
  };

  return (
    <Form
      layout="inline"
      form={form}
      name="period-detail-search"
      className="search-form-style"
      style={{ marginBottom: '16px' }}
      onFinish={onFinish}
      initialValues={{
        timeType: '3',
      }}
    >
      <div className="flex">
        <Form.Item name="timeType" style={{ marginRight: 6, marginBottom: 20 }}>
          {type == '2' ? (
            '支付时间'
          ) : (
            <Select style={{ minWidth: 90, width: 130 }}>
              <Option value="3">支付时间</Option>
              {type == '1' ? (
                <Option value="2">完成时间</Option>
              ) : (
                <Option value="4">入账时间</Option>
              )}
            </Select>
          )}
        </Form.Item>
        <Form.Item name="payTime">
          <RangePicker
            style={{ width: '350px' }}
            format={dateFormat}
            showTime
            // disabledDate={disabledDate}
          />
        </Form.Item>
      </div>
      <Form.Item label="关联单号" name="orderSn">
        <Input style={{ width: '140px' }} placeholder="请输入单号" />
      </Form.Item>
      <Form.Item label="支付环节" name="transType">
        <Select
          placeholder="全部"
          style={{ minWidth: '100px', width: '140px' }}
        >
          <Option value="4">下单付款</Option>
          <Option value="13">修改商品</Option>
          <Option value="43">拿货换货</Option>
          <Option value="12">拿货改价</Option>
          <Option value="9">订单退款</Option>
          <Option value="23">订单返审核</Option>
          <Option value="22">订单作废</Option>
          <Option value="26">账期还款</Option>
          <Option value="10">拿货退货</Option>
          <Option value="27">仓内拆单</Option>
          <Option value="28">采购付款</Option>
          <Option value="29">采购作废</Option>
          <Option value="30">采购退款</Option>
          <Option value="33">拆分装箱</Option>
          <Option value="34">线下备货</Option>
          <Option value="35">取消线下备货</Option>
          <Option value="36">财审结算</Option>
          <Option value="37">无采购入库</Option>
          <Option value="42">商户退款</Option>
          <Option value="20">其他</Option>
        </Select>
      </Form.Item>
      <Form.Item label="商品名称" name="goodsName">
        <Input style={{ width: '140px' }} placeholder="请输入商品名称" />
      </Form.Item>
      <Form.Item label=" " colon={false}>
        <Button
          type="primary"
          htmlType="submit"
          style={{ marginRight: '12px' }}
        >
          查询
        </Button>
        <Button onClick={onReset}>重置</Button>
      </Form.Item>
    </Form>
  );
};

export default PeriodDetailSearch;
